Ant Design 家族再添新成员，全家族一览！

近日，基于 Ant Design 的 Web3 开源组件库 Ant Design Web3 正式发布，Ant Design 家族又添一员。Ant Design 是蚂蚁金服推出的一个服务于企业级产品的设计体系，这个体系不断迭代，衍生出很多相关产品，给前端开发带来很大的便利。本文就来盘点一下 Ant Design 家族的产品，你用过几个？

Ant Design

Ant Design 组件库是一套基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品，其提供了大量常用UI组件，包括表格、按钮、表单、提示框、树形控件等等。这个组件库主要用于研发企业级中后台产品，提炼自企业级中后台产品的交互语言和视觉风格，开箱即用的高质量React组件。使用TypeScript开发，提供完整的类型定义文件。

Ant Design 是使用 React 实现的，社区还提供了一些其他技术的实现：

• NG-ZORRO - Ant Design of Angular[1]

• NG-ZORRO-MOBILE - Ant Design Mobile of Angular[2]

• Ant Design of Vue[3]

官网：https://ant.design/

Ant Design Pro

Ant Design Pro 是一个企业级中后台前端/设计解决方案，使用 React 和 Ant Design 作为基础框架，提供多功能的布局和设计组件，支持自动建立前端应用程序，并提供完整的开发和构建工具。它专门用于构建企业级管理后台和前端应用，提供一整套前端中后台项目的解决方案，包括路由、权限管理、国际化、数据mock、工程化等，帮助开发者快速搭建功能丰富的管理系统。

官网：https://pro.ant.design/

Ant Design Web3

Ant Design Web3 是一个基于 Ant Design 的 Web3 React 组件库，它提供了一系列的组件，可以帮助你快速构建去中心化应用（DApp）。除了提供基本的组件之外，还提供了和链交互的能力，多层架构的设计可以兼容不同的链，也让组件拥有了超越 UI 的能力。

Ant Design Web3 的特点如下：

• Ant Design 友好：Ant Design Web3 的设计体系与 Ant Design 无缝衔接，开发者使用更容易。

• 开箱即用的体验：可以快速设置项目，并利用预构建的组件来创建 DApps。

• 与不同链的兼容性：Ant Design Web3 设计具有良好的扩展性，允许通过适配器适应不同的链。

Ant Design Web3 定义了一套通用的 API，基于这套 API 可以通过适配层对接不同的区块链。目前，支持了以太坊（包括兼容 EVM 的链），未来会尝试支持更多的链。

官网：https://web3.ant.design/

Ant Design Pro Components

Ant Design Pro Components 是基于Ant Design而开发的模板组件，提供更高级别的抽象支持，开箱即用，可以显著提升制作CRUD页面的效率，更加专注于页面。ProComponents 是在Ant Design的基础上进行封装的页面级组件库，一个组件就可以搞定一个页面。这个组件库是 Ant Design Pro 中后台框架所用的主要组件库，内置了一系列的设计规范，预设了常用的逻辑，同时提供了灵活的支持。

官网：https://procomponents.ant.design/

Ant Design Mobile

Ant Design Mobile 是 Ant Design 的移动规范的React实现，提供40+高质量基础组件，用于研发移动端产品，能够轻松适应各类产品风格。同时，UI样式高度可配置，拓展性更强。这个组件库全面兼容react/preact，可以全面覆盖各类场景。它基于React Native的iOS/Android/Web多平台支持，提供丰富的组件和特性，满足各种功能需求。

官网：https://ant-design-mobile.antgroup.com/

Ant Design Mini

Ant Design Mini 是一套基于 Ant Design 的小程序 UI 组件库，目前支持在支付宝小程序、微信小程序（Beta）、uniapp 中使用，其特性如下：

• 高性能：无需配置，即可拥有最佳的包体积大小和极致的性能

• 可定制：可以高效地对组件外观进行调整或创造自己的主题

• 原子化：每个组件的功能不多也不少，恰好就是你所需

• 流畅感：拥有流畅的手势和细腻的动画，助力产品打造出极致体验

官网：https://ant-design-mini.antgroup.com/

Ant Design Charts（Antv）

Ant Design Charts 一套数据可视化组件库，作为Ant Design的官方图表组件解决方案。这个组件库支持多种视觉效果，可以快速生成漂亮的图表和图形，并且提供了一些基本图表类型（如柱状图、折线图、饼图等），并支持自定义配置选项，比如图表的数据源、样式、标签等。此外，Ant Design Charts 是 AntV 的 React 版本，对 React 技术栈的同学更加友好。

AntV 是蚂蚁集团提供的一套全新的视图可视化图表库，以图形出发，覆盖了传统统计图表、关系数据可视化、地理空间数据可视化、移动端图表、2D绘图引擎和智能可视化等多个领域，主要包含 G2、G6、X6、L7、F2、AVA 等十数个项目以及一套完整的图表使用和设计规范。

官网：https://ant-design-charts.antgroup.com/

Ant Design Landing

Ant Design Landing 是针对产品首页的解决方案。它秉承 Ant Design 的设计价值观，延用 Ant Design 的设计原则，可以快速搭建出用户需要的首页，进一步提升工作效率。这个产品可以说是前端开发者“偷懒”的神器，不用写代码，就能开发出一个个精美的网站首页。平台拥有丰富的各类首页模板，下载模板代码包，即可快速使用。

官网：https://landing.ant.design/

Ant Motion

Ant Motion 是从 Ant Design 中提炼出来的动效语言，是一套React框架动效解决方案。它不仅仅是一种动效语言，还可以帮助开发者更容易地在项目中使用动效。通过使用 Ant Motion，开发者可以通过简单的配置实现所需的动画效果，包括单项动画、组合动画等，快速地提高工作效率。

官网：https://motion.ant.design/

Scaffolds

Scaffolds 是一个丰富实用的脚手架集合。

官网：https://scaffold.ant.design/

[1]Ant Design of Angular： http://ng.ant.design/

[2]Ant Design Mobile of Angular： http://ng.mobile.ant.design/

[3]Ant Design of Vue： http://antdv.com/

往期推荐